<!-- src/views/ArticlePublish.vue -->
<template>
  <div class="publish-page">
    <el-input v-model="title" placeholder="请输入文章标题" class="title-input" />
    <el-input v-model="summary" placeholder="请输入摘要" class="title-input"></el-input>
    <BlogEditor ref="editor" />
    <el-select v-model="categoryId" placeholder="请选择文章分类" class="category-select">
      <el-option
        v-for="item in categoryOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <div class="action-buttons">
      <el-button type="primary" @click="handlePublish"> 发布文章 </el-button>
    </div>
  </div>
</template>

<script setup>
import { nextTick, onMounted, reactive, ref } from "vue";
import BlogEditor from "@/components/editor/BlogEditor.vue";
import request from "@/components/utiles/request.js";
import useUserIdStore from "@/stores/useUserId";
import { ElMessage } from "element-plus";
import router from "@/router";

const title = ref("");
const editor = ref(null);
const summary = ref("");
const categoryId = ref();
const categoryOptions = [
  { value: 1, label: "Java" },
  { value: 2, label: "Python" },
  { value: 3, label: "前端" },
  { value: 4, label: "后端" },
  { value: 5, label: "大数据" },
  { value: 6, label: "其他" },
];
const getUserId = useUserIdStore();
const handlePublish = async () => {
  // 添加空值检查
  if (!editor.value) {
    console.error("编辑器实例未初始化");
    return;
  }

  const content = editor.value.getContent();
  // if(content){
  //   ElMessage.error("内容含有违禁词，请修改后再发布");
  //   return;
  // }
  const uploadData = await request.post("/article/addArticle", {
    title: title.value,
    summary: summary.value,
    content: content,
    categoryId: categoryId.value,
    userId: getUserId.userId,
    status: 1,
  });

  if (uploadData.data.code === 200) {
    // 添加空值检查
    if (!uploadData.data) {
      console.error("上传数据为空");
      return;
    }
    // 发布成功
    console.log("发布成功");
    await router.push("/layout/articleHome");
    nextTick(() => {
      ElMessage({
        message: "发布成功",
        type: "success",
      });
    });
  } else {
    // 发布失败
    console.error("发布失败", uploadData.message);

    ElMessage({
      message: "发布失败",
      type: "error",
    });
  }
};

const userId = localStorage.getItem("authorization"); // 假设用户ID为2
const userdata = localStorage.getItem("userData");

// 检查 localStorage 中是否存在 "authorization
onMounted(async () => {
  console.log("编辑器实例已初始化");
  console.log(userId);
  console.log(userdata);
  if (!localStorage.getItem("authorization")) {
    await router.push("/userLogin");
    ElMessage.error("登录已过期，请重新登录");
    return;
  }
});
</script>

<style scoped>
.publish-page {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.title-input {
  margin-bottom: 20px;

  :deep(.el-input__inner) {
    font-size: 24px;
    height: 60px;
  }
}

.action-buttons {
  margin-top: 20px;
  text-align: right;
}
.category-select {
  margin-top: 20px;
  width: 240px;
}
</style>
